<template>
  <div>
    <el-button type="primary" @click="changeaddstate">新增楼盘</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="名称" width="150"> </el-table-column>
      <el-table-column prop="address" label="地址" width="150">
      </el-table-column>
      <el-table-column prop="buildtype" label="建筑类型" width="180">
        <template slot-scope="a">
          <div v-for="item in buildtype" :key="item._id">
            {{ item._id == a.row.buildtype ? item.name : "" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="floortype" label="楼盘类型" width="180">
        <template slot-scope="a">
          <div v-for="item in floortype" :key="item._id">
            {{ item._id == a.row.floortype ? item.name : "" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="area" label="面积" width="100"> </el-table-column>
      <el-table-column prop="price" label="均价" width="100"> </el-table-column>
      <el-table-column prop="introduction" label="描述" width="180">
      </el-table-column>
      <el-table-column prop="caozuo" label="操作">
        <template slot-scope="thing">
          <el-link
            type="primary" 
            style="margin-left: 5px"
            @click="delOne(thing.row)"
            >删除</el-link
          >
          <el-link
            type="primary"
            style="margin-left: 5px"
            @click="update(thing.row)"
            >修改</el-link
          >
          <el-link
            type="primary"
            style="margin-left: 5px"
            @click="addUnit(thing.row._id)"
            >编辑房源</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加楼盘" :visible.sync="addfloorState">
      <el-form :model="floor">
        <el-form-item label="楼盘名称" :label-width="formLabelWidth">
          <el-input v-model="floor.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="floor.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="面积" :label-width="formLabelWidth">
          <el-input v-model="floor.area" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="介绍" :label-width="formLabelWidth">
          <el-input v-model="floor.introduction" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="floor.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年限" :label-width="formLabelWidth">
          <el-input v-model="floor.year" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="建筑类型" :label-width="formLabelWidth">
          <el-select v-model="floor.buildtype" placeholder="请选择活动区域">
            <!-- <el-option label="区域一" value="shanghai"></el-option> -->
            <el-option
              v-for="item in buildtype"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼盘类型" :label-width="formLabelWidth">
          <el-select v-model="floor.floortype" placeholder="请选择活动区域">
            <!-- <el-option label="区域一" value="shanghai"></el-option> -->
            <el-option
              v-for="item in floortype"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addfloorState = false">取 消</el-button>
        <el-button type="primary" @click="addfloor">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改楼盘资料" :visible.sync="updatefloorState">
      <el-form :model="floor1">
        <el-form-item label="楼盘名称" :label-width="formLabelWidth">
          <el-input v-model="floor1.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="floor1.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="面积" :label-width="formLabelWidth">
          <el-input v-model="floor1.area" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="介绍" :label-width="formLabelWidth">
          <el-input v-model="floor1.introduction" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="floor1.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年限" :label-width="formLabelWidth">
          <el-input v-model="floor1.year" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="建筑类型" :label-width="formLabelWidth">
          <el-select v-model="floor1.buildtype" placeholder="请选择活动区域">
            <!-- <el-option label="区域一" value="shanghai"></el-option> -->
            <el-option
              v-for="item in buildtype"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼盘类型" :label-width="formLabelWidth">
          <el-select v-model="floor1.floortype" placeholder="请选择活动区域">
            <!-- <el-option label="区域一" value="shanghai"></el-option> -->
            <el-option
              v-for="item in floortype"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatefloorState = false">取 消</el-button>
        <el-button type="primary" @click="updateFloor">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
data
<script>
export default {
  data() {
    return {
      floor: {
        name: "",
        address: "",
        area: "",
        introduction: "",
        price: "",
        year: "",
        buildtype: "",
        floortype: "",
      },
      floor1: {
        name: "",
        address: "",
        area: "",
        introduction: "",
        price: "",
        year: "",
        buildtype: "",
        floortype: "",
      },
      addfloorState: false,
      formLabelWidth: "120px",
      tableData: [],
      floortype: [],
      buildtype: [],
      updatefloorState:false,
    };
  },
  methods: {
    async addfloor() {
      let {
        data: { code },
      } = await this.axios.post("/addfloor", this.floor);
      if (code == 200) {
        this.$message.success("添加成功");
        this.addfloorState = false;
        this.getFloor();
      }
    },
    async getFloorType() {
      let {
        data: { code, floortype },
      } = await this.axios.get("/getFloorType");
      //   console.log(floortype);
      this.floortype = floortype;
    },
    async getBuildType() {
      let {
        data: { code, buildtype },
      } = await this.axios.get("/getBuildType");
      //   console.log(buildtype);
      this.buildtype = buildtype;
    },
    changeaddstate() {
      this.addfloorState = true;
    },
    async getFloor() {
      let {
        data: { code, floors },
      } = await this.axios.get("/getfloor");
      if (code == 200) {
        this.tableData = floors;
      }
    },
    async delOne(floor) {
      let {
        data: { code },
      } = await this.axios.post("/delOne", {floor});
      if (code == 200) {
        this.$message.success("删除成功");
        this.getFloor();
      }
    },
    update(floor){
        this.updatefloorState = true
        this.floor1 = floor
    },
    async updateFloor(){
        console.log(this.floor1);
        let {data:{code}} = await this.axios.post('/update',this.floor1)
        if(code == 200){
            this.$message.success('修改成功')
            this.getFloor()
            this.updatefloorState = false
        }
    },
    addUnit(_id){
        this.$router.push('/floor')
        this.$store.state.floor_id = _id
    }
  },
  created() {
    this.getBuildType();
    this.getFloorType();
    this.getFloor();
  },
};
</script>

<style>
</style>